<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="bakbtn" @click="getBp()">
			<image src="../../static/img/backbtn.png" mode=""></image>
		</view>
		<!-- #endif -->
		<view class="all">
			<view class="card">
				<view v-for="(item,index) in detail.goods" :key="index">
					<view class="u-flex-center u-row-left u-m-b-20">
						<image :src="item.image" mode="aspectFill" class="head-img"></image>
						<view class="u-flex-center u-row-between" style="width: 100%;">
							<view class="cont">
								<view class="name u-line-2" style="line-height: 1.2rem">{{item.title}}</view>
								<view class="cate">规格：{{item.difference}}</view>
								<view class="price u-m-t-10" v-if="showPayType == 1"><text>￥</text>{{item.price}}</view>
							</view>
							<view class="number">×{{item.number}}</view>
						</view>
					</view>
					<view v-if="detail.state==6" class="u-flex u-row-right">
						<view class="button"
							@click="$func.jump('/yCreate/pages/afterSale?id='+id+'&item='+JSON.stringify(item))"
							v-if="item.refund_status==0">退款</view>
						<view class="button" style="margin-left: 30rpx;" v-if="item.refund_status==1">退款中</view>
						<view class="button" style="margin-left: 30rpx;" v-if="item.refund_id!=0"
							@click="goDetail(item.refund_id)">售后信息</view>
						<view class="button button2" style="margin-left: 30rpx;" v-if="item.refund_status==5">拒绝退款
						</view>
						<view class="button button3" style="margin-left: 30rpx;" v-if="item.refund_status==3">退款成功
						</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="top-title">订单信息</view>
				<view class="message-item u-flex u-row-between">
					<view>订单状态</view>
					<view class="red-status" v-if="detail.state==1">待支付</view>
					<view class="red-status" v-if="detail.state==2">待发货</view>
					<view class="red-status" v-if="detail.state==3">待收货</view>
					<view class="red-status" v-if="detail.state==6">已完成</view>
					<view class="red-status" v-if="detail.state==4">待评价</view>
					<view class="red-status" v-if="detail.state==7">已取消</view>
				</view>
				<view class="message-item u-flex u-row-between">
					<view>订单号</view>
					<text>{{detail.order_no}}</text>
				</view>
				<view class="message-item u-flex u-row-between">
					<view>下单时间</view>
					<text>{{detail.createtime_text}}</text>
				</view>
				<view class="message-item u-flex u-row-between" v-if="detail.state==2||detail.state==3">
					<view>支付时间</view>
					<text>{{detail.paymenttime_text}}</text>
				</view>
				<view class="message-item u-flex u-row-between" v-if="detail.state==3">
					<view>发货时间</view>
					<text>{{detail.delivertime_text}}</text>
				</view>
				<view class="message-item u-flex u-row-between" v-if="detail.shop">
					<view>商家名称</view>
					<text>{{detail.shop.shopname}}</text>
				</view>
				<view class="message-item u-flex u-row-between" v-if="detail.pay && showPayType == 1">
					<view>商品价格</view>
					<text>{{detail.pay.order_price}}元</text>
				</view>
				<view class="message-item u-flex u-row-between" v-if="detail.pay && showPayType == 1">
					<view>优惠价格</view>
					<text>{{detail.pay.discount_price}}元</text>
				</view>
				<view class="message-item u-flex u-row-between" v-if="detail.pay && showPayType == 1">
					<view> 运费</view>
					<text>{{detail.pay.freight_price}}元</text>
				</view>
				<view class="message-item u-flex u-row-between" v-if="detail.pay && showPayType == 1">
					<view>实付金额</view>
					<text class="red-status">{{detail.pay.price}}元</text>
				</view>
				<view class="message-item u-flex u-row-between" v-if="is_self==1">
					<view>供应商</view>
					<text>{{detail.ghshop.shopname}}</text>
				</view>
				<view class="message-item u-flex u-row-between">
					<view> 配送方式 </view>
					<text>{{detail.is_qczx == 1 ? '千创专线' : '快递物流'}}</text>
				</view>
				<view class="message-item u-flex u-row-between" v-if="detail.is_qczx == 1">
					<view> 送达时间 </view>
					<text>{{detail.is_qczx == 1 ? detail.sdsj : ''}}</text>
				</view>
				<view class="message-item u-flex u-row-between" v-if="detail.is_qczx == 0">
					<view> 快递单号 </view>
					<text>{{detail.express_no || '无'}}</text>
				</view>
				<view class="message-item u-flex u-row-between" v-if="detail.is_qczx == 0 && detail.remark && showPayType == 0">
					<view> 发货备注 </view>
					<text>{{detail.remark || '无'}}</text>
				</view>
				<view class="message-item u-flex u-col-top u-row-between" v-if="detail.address">
					<view class="u-m-r-30">收货人信息</view>
					<text style="max-width: 70%;word-break: break-all;">{{detail.address.name}} {{detail.address.mobile}} </text>
				</view>
				<view class="message-item u-flex u-col-top u-row-between" v-if="detail.address">
					<view class="u-m-r-30">收货地区</view>
					<text style="max-width: 70%;word-break: break-all;">{{detail.address.ssq}}</text>
				</view>
				<view class="message-item u-flex u-row-between">
					<view>街道名称</view>
					<text>{{detail.street_name || '无'}}</text>
				</view>
				<view class="message-item u-flex u-row-between">
					<view>小区名称</view>
					<text>{{detail.community_name || '无'}}</text>
				</view>
				<view class="message-item u-flex u-row-between" v-if="detail.address">
					<view>详细地址</view>
					<text style="max-width: 70%;word-break: break-all;">{{detail.address.area || '无'}}</text>
				</view>
			</view>
			<!-- <view class="wulbtn" @click="show3=true" v-if="shop&&detail.refund.state==1">
				填写退款物流单号
			</view> -->
		</view>
		<!-- <view class="layer">
			<view class="wul_layer">
				<view class="wultit">
					填写物流单号
					<image src="../../static/zhibo/guanbiW.png" mode="" class="gbwul"></image>
				</view>
				<view class="flex align-center margin-40">
					<view class="text-28">快递公司:</view>
					<view class="contbox text-28">
						请选择快递公司
					</view>
				</view>
				<view class="flex align-center margin-40">
					<view class="text-28">快递单号:</view>
					<input type="text" class="contbox text-28" placeholder="请输入快递单号"/>
				</view>
				<view class="wulbtn" @click="">
					确认
				</view>
			</view>
		</view> -->

		<view style="height:300rpx; width: 100%;"></view>
		<view class="box" v-if="detail.state==2&&shop">
			<view class="u-flex u-row-between">
				<view class="btn btn2 btn3" @click="show3=true" v-if="is_self!=1">立即发货</view>
				<view class="btn btn2 btn3" @click="showGong(id,detail.goods[0].goods_id)" v-if="is_self==1">选择供货商家
				</view>
			</view>
		</view>
		<view class="" v-if="!shop">
			<view class="box" v-if="detail.state==1||detail.state==3">
				<view class="u-flex u-row-between">

					<view style="flex: 1" class="btn" @click="show = true" v-if="detail.state==3">查看物流</view>
					<view style="flex: 1" class="btn btn2" v-if="detail.state==3" @click="confirm">确认收货</view>
					<view style="flex: 1" class="btn" v-if="detail.state==1" @click="cancel">取消订单</view>
					<view style="flex: 1" class="btn btn2" v-if="detail.state==1" @click="pay">立即支付</view>
					<view style="flex: 1" class="btn btn3" v-if="detail.state==2" @click="cancels"> 取消订单</view>
					<!-- <view class="btn btn3" v-if="detail.state==2" @click="$func.jump('/yCreate/pages/afterSale?id='+id)">申请退款</view> -->
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" v-if="logistics.kuaidi" border-radius="25" :height="detail.is_qczx !== 1 ? '70%' : '35%'" closeable safe-area-inset-bottom>
			<view class="coupon">
				<view class="cou_tit">物流信息</view>
				<view style="height: 100rpx;"></view>
				<view class="u-p-30">
					<view class="u-flex u-row-between">
						<view class="name u-flex">
							<image v-if="logistics.kuaidi.logo" :src="logistics.kuaidi.logo" mode="aspectFill" />
							<view v-if="detail.is_qczx == 1">
								<view style="padding:10px 0;font-size:16px;">
									<text class="titleL">配送方式：</text>
									<text>千创专线</text>	
								</view>
								<view style="padding:10px 0;font-size:16px;">
									<text class="titleL">送达时间：</text>
									<text>
										{{detail.sdsj}}
									</text>
								</view>
							</view>
							<view v-else>{{  logistics.kuaidi.name  }} <text class="u-m-l-24">{{logistics.express_no}}</text>
							</view>
						</view>
						<view class="copy" v-if="detail.is_qczx != 1" @click="paste(logistics.order_no)">复制</view>
					</view>
					<view class="u-p-20" v-if="detail.is_qczx != 1">
						<u-time-line>
							<u-time-line-item v-for="item in logistics.express" :key="item.time">
								<template v-slot:node v-if="item.status">
									<view class="u-node"></view>
								</template>
								<template v-slot:content v-if="item.status">
									<view>
										<view class="u-order-title u-flex">
											<text class="u-m-r-15">{{item.status}}</text>
											<view class="u-order-time ">{{item.time}}</view>
										</view>
										<!-- <view class="u-order-desc">您的快递。。。。【深圳市】已揽收，揽收人：加加加（<text>1836745744</text>）</view> -->
										<view class="u-order-desc">{{item.context}}</view>
									</view>
								</template>
							</u-time-line-item>
						</u-time-line>
					</view>
				</view>
				<view style="height: 10rpx;"></view>
			</view>
		</u-popup>
		<u-popup v-model="show3" mode="center" border-radius="20">
			    <view class="card2">
                <view
                    class="u-flex"
                    style="padding: 20rpx 0; justify-content: space-around"
                >
                    <view
                        class="pop-tit"
                        :style="{ color: boxType == 1 ? '' : '#999' }"
                        @click="boxType = 1"
                    >
                        物流信息
                        <view
                            :class="
                                boxType == 1 ? 'borderBottomLine' : 'bottomLine'
                            "
                        >
                        </view>
                    </view>
                    <view
                        class="pop-tit"
                        :style="{ color: boxType == 2 ? '' : '#999' }"
                        @click="boxType = 2"
                    >
                        千创专线
                        <view
                            :class="
                                boxType == 2 ? 'borderBottomLine' : 'bottomLine'
                            "
                        >
                        </view>
                    </view>
                </view>
                <view v-if="boxType == 1">
					<picker style="z-index: 999" :range="list3" range-key="name" @change="choseKd">
					<view class="item u-border-bottom u-flex-center u-row-between">
						<text>快递公司</text>
						<text class="right" v-if="!corporation">{{'请选择'}}</text>
						<text class="right right2" v-else>{{corporation}}</text>
					</view>
				</picker>
                    <view
                        class="item u-border-bottom u-flex-center u-row-between"
                    >
                        <text>快递单号</text>
                        <input
                            type="text"
                            placeholder="请输入快递单号"
                            placeholder-class="ipt-sty"
                            v-model="orderNum"
                        />
                    </view>
                    <input
                        type="text"
                        v-model="remark"
                        placeholder="请输入备注"
                        class="item u-border-bottom u-flex-center u-row-between"
                    />
                    <view class="flex pop-button u-row-between">
                        <view
                            class="u-flex-center"
                            style="font-size: 30rpx"
                            @click="show3 = false"
                            >取消</view
                        >
                        <view
                            class="u-flex-center b2"
                            style="font-size: 30rpx"
                            @click="confirm()"
                            >确定</view
                        >
                    </view>
                </view>
                <view
                    v-if="boxType == 2 && hzshop_switch == 1"
                    style="font-size: 30rpx"
                >
                    <view class="">
                        <view
                            v-for="(item, index) in items"
                            :key="index"
                            class="item u-border-bottom u-flex u-row-between"
                        >
                            <view>{{ item.name }}</view>
                            <view
                                class=" right"
                                @click="choose(item)"
                                style="
                                    border: 1px solid #333;
                                    border-radius: 50%;
                                    width: 40rpx;
                                    height: 40rpx;
                                "
                            >
                                <view class="inner" v-if="index == chooseIndex">
                                    <image
                                        style="width: 100%; height: 100%"
                                        src="/static/wImg/radius.png"
                                        mode="scaleToFill"
                                    />
                                </view>
                            </view>
                        </view>
                    </view>
                    <view
                        class="item u-flex-center u-border-bottom u-row-between"
                    >
                        <text>选择时间</text>
                        <text class="right" @click="clickDate">{{
                            date || "请选择"
                        }}</text>
                        <u-calendar
                            z-index="99999999"
                            v-model="show_date"
                            :min-date="minDate"
                            :max-date="maxDate"
                            mode="date"
                            @change="changeDate"
                        ></u-calendar>
                    </view>
                    <view class="flex pop-button u-row-between">
                        <view
                            class="u-flex-center"
                            style="font-size: 30rpx"
                            @click="show3 = false"
                            >取消</view
                        >
                        <view
                            class="u-flex-center b2"
                            style="font-size: 30rpx"
                            @click="getFahuo()"
                            >确定</view
                        >
                    </view>
                </view>
            </view>
		</u-popup>

		<!-- 选择供货商 -->
		<u-popup v-model="show6" mode="center" border-radius="20">
			<view class="card2">
				<view class="pop-tit">选择供货商家</view>
				<view class="item u-border-bottom u-flex-center u-row-between" @click="showstore=true">
					<text>供货商家</text>
					<text class="right right2">{{shopname?shopname:'请选择'}}</text>
				</view>

				<input type="text" v-model="remark" placeholder="请输入备注"
					class="item u-border-bottom u-flex-center u-row-between" />
				<view class="flex pop-button u-row-between">
					<view class="u-flex-center" @click="show6=false">取消</view>
					<view class="u-flex-center b2" @click="confirmStore()">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- <u-select v-model="show4" :list="list3" label-name="name" value-name="code" @confirm="confirm1($event,3)"
			confirm-color="#606DCE"></u-select> -->
		<u-select v-model="showstore" :list="store" label-name="shopname" value-name="id" @confirm="confirm1($event,4)"
			confirm-color="#606DCE"></u-select>
	</view>
</template>

<script>
	//#ifdef  H5
	var wx = require('jweixin-module')
	//#endif
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				show: false,
				id: '',
				detail: {},
				logistics: {},
				show3: false,
				show4: false,
				list3: [],
				corporation: "",
				orderNum: "",
				shop: "",
				kdlist: [],
				is_self: "",
				remark: "",
				store: [],
				shopname: "",
				ghshop_id: "",
				show6: false, //选择供货商家
				showstore: false,
				showType:'',
				showPayType:0,
				boxType: 1,
				hzshop_switch:'',
				items: [
					{
						name: "千创专线今日达",
						value: "0",
					},
					{
						name: "千创专线次日达",
						value: "1",
					},
				],
				chooseIndex: 0,
				date: "",
				minDate: "",
				maxDate: "",
				show_date: false
			};
		},
		onLoad(options) {
			        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var minDate = year + "-" + month + "-" + day;
        var maxDate = year + 1 + "-" + month + "-" + day;
        this.minDate = minDate;
        this.maxDate = maxDate;
        	this.hzshop_switch = uni.getStorageSync("hzshop_switch");
			this.is_self = uni.getStorageSync('is_self')
			this.showPayType = options.showPayType;
			this.show = options.showType == 1 ? true : false;
			console.log(options);
			this.id = options.id
			this.shop = options.shop ? options.shop : ''
			this.$u.post('api/shop/get_order_kuaidi').then(res => {
				this.list3 = res.data
				console.log(this.list3, res.data, 'list3')
			})

		},
		onShow() {
			if (this.id) {
				this.getDetail()
			}
		},
		methods: {
			        changeDate(e) {
            this.date = e.result;
        },
			        choose(e) {
            this.chooseIndex = e.value;
            this.date = "";
        },
			        clickDate() {
            this.show_date = true;
            this.chooseIndex = 3;
            console.log(this.chooseIndex);
        },
			showGong(id, goods_id) {
				this.id = id;
				this.show6 = true
				this.$u.post('api/shop/get_goods_gh', {
					goods_id: goods_id
				}).then(res => {
					this.store = res.data
				})
			},
			confirmStore() {
				this.$u.post('/api/shop/shop_order_fh', {
					order_id: this.id,
					ghshop_id: this.ghshop_id, //   快递单号
					remark: this.remark,
					fh_type: 2
				}).then(res => {
					this.$u.toast(res.msg)
					if (res.code == 1) {
						this.show6 = false;
						this.getDetail();
					}
				})
			},
			confirm() {
				this.$u.post('/api/wanlshop/order/confirmOrder', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.getDetail();
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			//确认发货
			getFahuo() {
				let is_qczx = null;
				if (this.code !== "" && this.orderNum !== "") {
					is_qczx = 0;
				} else {
					is_qczx = 1;
				}
				if (this.boxType == 1 && (this.code == "" || this.orderNum == "")) {
                	this.$u.toast("请填写快递公司和快递单号");
					return;
				} else if (this.boxType == 2) {
					if (this.date == "") {
						if (this.chooseIndex == 3) {
							this.$u.toast("请选择千创专线送达时间");
							return;
						}
					}
				}
				this.$u.post('/api/shop/shop_order_fh ', {
					order_id: this.id,
					express_name: this.corporation,
					express_no: this.orderNum,
					fh_type: 1,
                    is_qczx: is_qczx,
                    sdsj: this.date ? this.date : Number(this.chooseIndex) + 1,
				}).then(res => {
					if (res.code == 1) {
						this.getDetail();
						this.show3 = false
					} else {
						this.$u.toast(res.msg)
					}
				})
				// if (this.detail.refund) {
				// 	this.$u.post('/api/wanlshop/refund/toExpress ', {
				// 		id: this.detail.refund.id,
				// 		express_name: this.corporation,
				// 		express_no: this.orderNum,
				// 		fh_type: 1,
				// 		remark: this.remark
				// 	}).then(res => {
				// 		if (res.code == 1) {
				// 			this.getDetail();
				// 			this.show3 = false
				// 		} else {
				// 			this.$u.toast(res.msg)
				// 		}
				// 	})
				// } else {

				// }

			},
			pay() {
				let that = this
				let method = ''
				//#ifdef  H5
				method = 'mp'
				//#endif
				this.$u.post('/api/wanlshop/pay/payment', {
					code: null,
					method: 'app',
					order_id: this.id,
					order_type: 'goods',
					type: 'wechat'
				}).then(res => {
					// this.$u.toast(res.msg)
					if (res.code == 1) {
						// #ifdef H5
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: res.data.appId, // 必填，公众号的唯一标识
							timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
							nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.paySign, // 必填，签名
							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
						})
						// #endif
						let orderInfo = JSON.parse(res.data);
						// #ifdef H5
						wx.ready(function() {
							// #endif
							var wxpaySev = null;
							plus.payment.getChannels(function(channels) {
								for (var i in channels) {
									var channel = channels[i];
									if (channel.id === 'wxpay') {
										wxpaySev = channel;
									}
								}
								//发起支付
								plus.payment.request(wxpaySev, orderInfo, function(result) {
									var rawdata = JSON.parse(result.rawdata);
									uni.showToast({
										title: '支付成功'
									})
									setTimeout(() => {
										// uni.redirectTo({
										// 	url: '/yCreate/pages/goodsOrder'
										// })
										uni.navigateBack({
											delta: 1
										})
									}, 1500)
								}, function(e) {
									console.log("支付失败：" + JSON.stringify(e));
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									})
									setTimeout(() => {
										// uni.redirectTo({
										// 	url: '/yCreate/pages/goodsOrder'
										// })
										uni.navigateBack({
											delta: 1
										})
									}, 1500)
								});
							}, function(e) {
								console.log("获取支付渠道失败：" + JSON.stringify(e));
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								})
							});
							return
							wx.chooseWXPay({
								timestamp: res.data.timeStamp, // 时间戳
								nonceStr: res.data.nonceStr, // 随机数
								package: res.data.package, //
								signType: res.data.signType,
								paySign: res.data.paySign, // 签名
								success: function() {
									uni.showToast({
										title: '支付成功'
									})
									that.getDetail();
								},
								cancel: function() {
									uni.showToast({
										title: '取消支付',
										icon: 'none'
									})
									that.getDetail();
								},
								fail: function() {
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									})
									that.getDetail();
								}
							})
							// #ifdef H5
						})
						// #endif
					}
				})
			},
			cancel() {
				this.$u.post('/api/wanlshop/order/cancelOrder', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.getDetail();
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			cancels() {
				this.$u.post('/api/wanlshop/order/cancelOrder_dfh', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.getDetail();
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			paste(value) {
				uni.setClipboardData({
					data: value
				});
			},
			getDetail() {
				this.$u.get('/api/wanlshop/order/getOrderInfo', {
					id: this.id
				}).then(res => {
					this.detail = res.data
				})
				this.$u.post('/api/wanlshop/order/getLogistics', {
					id: this.id
				}).then(res => {
					this.logistics = res.data
				})
			},
			getBp() {
				uni.navigateBack({
					delta: 1
				})
			},
			confirm1(e, type) {
				if (type == 3) {
					this.code = e[0].value
					this.corporation = e[0].label
				} else if (type == 4) {
					console.log(e)
					this.ghshop_id = e[0].value
					this.shopname = e[0].label
				}
			},
			choseKd(e) {
				this.code = this.list3[e.detail.value].value
				this.corporation = this.list3[e.detail.value].name
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/yCreate/pages/refunddetail?id=' + id + '&type=1'
				})

			},
		}
	}
</script>

<style lang="scss">
	@import url(@/components/common.css);

	.all {
		padding: 0 24rpx 0;

		.card {
			width: 100%;
			margin-top: 18rpx;
			padding: 20rpx;
			background: #FFFFFF;
			border-radius: 10rpx;

			.head-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.cont {
				width: 100%;

				.name {
					margin-bottom: 12rpx;
					font-size: 28rpx;
				}

				.cate {
					width: fit-content;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					padding: 3rpx;
					background: #fafafa;
					font-size: 22rpx;
					border-radius: 5rpx;
				}

				.price {
					font-size: 40rpx !important;
					font-weight: 550;
					color: #EF5205;

					text {
						font-weight: 500;
						font-size: 20rpx;
					}
				}
			}

			.number {
				width: 120rpx;
				text-align: right;
				font-size: 24rpx;
				color: #B0B0B0;
			}

			.button {
				width: fit-content;
				width: -webkit-fit-content;
				padding: 10rpx 14rpx;
				border: 1rpx solid #939393;
				font-size: 26rpx;
				border-radius: 5rpx;
			}

			.button2 {
				border: 1rpx solid #F43000;
				color: #F43000;
			}

			.button3 {
				border: 1rpx solid #606DCE;
				color: #606DCE;
			}

			.top-title {
				font-size: 32rpx;
				color: #333333;
			}

			.message-item {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #BEBEBE;

				view {
					flex-shrink: 0;
				}

				text {
					text-align: right;
					display: block;
					font-size: 28rpx;
					color: #333333;
				}

				.red-status {
					color: #F43000;
				}
			}
		}
	}

	.box {
		position: fixed;
		bottom: 0;
		padding: 20rpx 40rpx;
		width: 100%;
		background: #FFFFFF;

		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

		.btn {
			width: 316rpx;
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid #BEBEBE;
			font-size: 28rpx;
			color: #BEBEBE;
			margin: 0 10rpx;
		}

		.btn2 {
			color: #FFFFFF;
			background: linear-gradient(90deg, #606DCE 0%, #606DCE 100%);
		}

		.btn3 {
			width: 100%;
		}
	}

	/deep/.u-icon__icon {
		color: #fff !important;
	}

	.coupon {
		height: 100%;

		.cou_tit {
			padding: 30rpx 0;
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 3;
			background-color: #606DCE;
		}

		.name {
			font-size: 28rpx;
			color: #333333;

			image {
				margin-right: 8rpx;
				width: 44rpx;
				height: 44rpx;
				border-radius: 254rpx;
			}
		}

		.copy {
			font-size: 28rpx;
			color: #333333;
		}

		.cou_item {
			margin-bottom: 40rpx;
			position: relative;
			width: 100%;
			height: 210rpx;
			overflow: hidden;
			border-radius: 30rpx;

			.cou_grey {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 2;
				background: rgba(76, 76, 76, 0.5);
			}

			.left {
				width: 471rpx;
				height: 210rpx;
				background: #fff;
				padding: 27rpx 40rpx 0rpx 30rpx;

				.code {
					font-size: 22rpx;
					color: #666666;
				}

				.cou_price {
					margin-right: 25rpx;
					color: #E55D23;
					font-size: 88rpx;
					font-weight: 550;

					text {
						margin-top: 32rpx;
						font-size: 26rpx;
						margin-right: 10rpx;
					}
				}

				.title {
					font-size: 26rpx;
					font-weight: bold;
					color: #333333;
				}

				.tips {
					margin-top: 10rpx;
					width: 154rpx;
					height: 31rpx;
					background: #E55D23;
					font-size: 20rpx;
					color: #FFFFFF;
				}

				.time {
					height: 20rpx;
					font-size: 22rpx;
					color: #666666;
					margin-top: 35rpx;
				}
			}

			.status {
				width: 220rpx;
				height: 210rpx;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				font-size: 30rpx;
				font-weight: bold;
				color: #fff;
				background: #606DCE;
			}
		}
	}

	.u-node {
		width: 22rpx;
		height: 22rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #707070;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;

		text {
			color: #F43000;
		}
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
		font-weight: 500;
	}

	.card2 {
		width: 600rpx;
		padding: 0 40rpx;
		margin-bottom: 20rpx;

		.pop-tit {
			color: #606DCE;
			text-align: center;
			margin-top: 30rpx;
			font-size: 35rpx;
			font-weight: 550;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.item {
			padding: 40rpx 0;
			font-size: 30rpx;

			input {
				font-size: 30rpx;
				text-align: right;
			}

			.ipt-sty,
			.right {
				font-size: 30rpx;
				color: #B0B0B0;
			}

			.right2 {
				color: #333;
			}
		}

		.pop-button {
			margin-top: 40rpx;

			view {
				width: 48%;
				height: 80rpx;
				border-radius: 40rpx;
				border: 1rpx solid #888;
				color: #888;
			}

			.b2 {
				background-color: #606DCE;
				border: none;
				color: #fff;
			}
		}
	}

	.bakbtn {
		width: 65rpx;
		height: 65rpx;
		position: fixed;
		top: 50rpx;
		left: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.bakbtn image {
		width: 40rpx;
		height: 40rpx;
	}

	.wulbtn {
		width: 630rpx;
		height: 80rpx;
		background: linear-gradient(135deg, #2BB984 0%, #8CD994 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 1rpx solid rgba(0, 0, 0, 0);
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 0rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 30rpx auto;
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: flex-end;
	}

	.wul_layer {
		width: 100%;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 0 50rpx 0;
	}

	.wultit {
		padding: 50rpx 0;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background: #606DCE;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
	}

	.gbwul {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 30rpx;
		top: 50rpx;
	}

	.contbox {
		flex: 1;
		border: 1rpx solid #ededed;
		padding: 20rpx;
		margin-left: 30rpx;
	}
	.titleL{
		font-size: 16px;
	}
	.tabsbg {
    overflow-x: scroll;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
}

.tabline {
    width: 45rpx;
    height: 6rpx;
    border-radius: 30rpx;
    background: #606dce;
    margin-top: 10rpx;
}
/deep/.uni-label-pointer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}
/deep/.uni-picker-container {
    z-index: 999999 !important;
}
.inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.borderBottomLine {
    border-bottom: 3px solid #606dce;
    width: 30px;
    margin: 5px 0 0 0;
}
.bottomLine {
    margin: 5px 0 0 0;
    border-bottom: 3px solid rgba(0, 0, 0, 0);
    width: 30px;
}
/deep/.u-drawer{
	z-index: 999 !important;
}
</style>